<template>
  <div class="road-detail-content">
      <div class="wy-main-title info-1200 wy-m-t-20">
          <p>首页  /  物流信息服务  /   线路信息<span v-if="departureCar?true:(destinationCar?true:false)">  /  {{departureCar}}-{{destinationCar||'国内'}}</span>
          </p>
      </div>
      <div class="road-startCity">
          <a-form :form="form" class='info-1200' style='margin-top:30px;'>
              <a-row :gutter='24' class='city-form'>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                         <a-input  placeholder="请选择出发地"  :value="departureCar" readOnly @click="magSvgShowMap('departureCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                        <a-input  placeholder="请选择车辆到达地" :value="destinationCar" readOnly @click="magSvgShowMap('destinationCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                    <a-form-item label="公司名称:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input v-model="companyName" placeholder="请输入公司名称"  maxlength="100" />
                    </a-form-item>
                </a-col>
                <a-col :span='8'>
                    <a-button type="primary" :span='2' style='margin:0 20px 0 20px;' class='ant-btn-primary' @click="lineGetSelectLines">搜索</a-button>
                    <a-button :span='2' @click="reset">重置</a-button>
                </a-col>
              </a-row>
          </a-form>
      </div>
      <!-- 城市线路 -->
      <div class="road-city-changeway info-1200">
        <div class="r-hot-title" v-if="departureCar?true:(destinationCar?true:false)">
              <span></span>
              <span class="r-city">{{departureCar}}</span>
              <span></span>
              <span class="r-city">{{destinationCar||'国内'}}</span>
        </div>
       <!-- 运输方式切换 -->
        <a-tabs defaultActiveKey="" @change="lineTypeChange">
            <a-tab-pane tab="全部" key="">
            </a-tab-pane>
            <a-tab-pane tab="公路" key="1">
            </a-tab-pane>
            <a-tab-pane tab="铁路" key="2">
            </a-tab-pane>
            <a-tab-pane tab="航空" key="3">
            </a-tab-pane>
            <a-tab-pane tab="海路" key="4">
            </a-tab-pane>
            <!-- <a-tab-pane tab="多式联运" key="5">
              <div class="intermodal">
                      <a-list itemLayout="vertical" size="large" :dataSource="ALListData">
                          <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                              <div class="road-box-conent">
                                  <div class="road-pic">
                                      <img v-lazy="item.imgurl">
                                  </div>
                                  <div class="road-name">
                                      <span>出发地:<i class="road-city-name">{{item.startPlace}}</i></span>
                                      <span>到达地:<i  class="road-city-name">{{item.arrivePlace}}</i></span>
                                      <span>企业名称:<i  class="road-city-name">{{item.companyName}}</i></span>
                                      <span>介绍:<i class="road-black">{{item.details}}</i></span>
                                      <span>地址:<i class="road-black">{{item.address}}</i></span>
                                  </div>
                              </div>
                              <div class="road-box-conent">
                                    <p><i class="road-city-name">空海联运</i></p>
                                    <span>时效:<i class="road-black">{{item.times}}</i></span>
                              </div>
                              <div class="road-box-conent">
                                    <p><i class="road-city-name">{{item.useCompany}}</i></p>
                                    <div class="useStar">
                                        <span>用户星级</span>
                                        <a-rate :defaultValue="2.5" allowHalf />
                                        <div class="attestaion">{{item.renzhen}}</div>
                                    </div>
                              </div>
                              <div class="road-box-conent">
                                    <a-button v-if="loggedIn" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal">我要发货</a-button>
                                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">我要发货</a-button></router-link>
                                    <nuxt-link :to="'/transport/'+item.lineId">
                                      <a-button class='road-detail'>查看详情</a-button>
                                    </nuxt-link>
                              </div>
                          </a-list-item>
                      </a-list>
              </div>
            </a-tab-pane> -->
        </a-tabs>
        <div class="all-ways">
          <a-list itemLayout="vertical" size="large" :dataSource="ALListData" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                <div class="road-box-conent" v-if="item.lineType !=3">
                      <div class="road-pic">
                          <img :src="item.companyPic">
                      </div>
                      <div class="road-name">
                          <span>出发地:<i class="road-city-name wy-text-nowrap">{{item.beginPlace}}</i></span>
                          <span>到达地:<i  class="road-city-name wy-text-nowrap">{{item.endPlace}}</i></span>
                          <span class="company-names">线路介绍:<i class="road-black wy-text-nowrap">{{item.description||'暂无'}}</i></span>
                          <!-- <span>介绍:<i class="road-black">{{item.description||'暂无'}}</i></span> -->
                      </div>
                </div>
                <div v-if="item.lineType==1" class="road-box-conent">
                        <p><i class="road-city-name">公路运输</i></p>
                        <span v-if="item.transTypeName == '零担'" class="active-data">重货价:<i class="road-orange">{{item.weightPriceDisplay}}</i><i v-if="item.weightPriceUnitValue == null">元/公斤</i><i v-if="item.weightPriceUnitValue != null">{{item.weightPriceUnitValue}}</i>
                        </span>
                        <span v-if="item.transTypeName == '零担'" class="active-data">轻货价:<i class="road-orange">{{item.volumePriceDisplay}}</i>元/立方米</span>
                        <span class="active-data">有效期:<i class="road-black road-orange" v-if="item.longValid == 0">{{item.validDay || '暂未输入'}}</i><i  v-if="item.longValid == 0">天</i><i class="road-black" v-if="item.longValid == 1" style="padding-left:6px;">长期有效</i>
                        </span>
                        <span class="low-price" style="margin-left:8px;">最低一票价:<i class="road-orange">{{item.transPriceDisplay}}</i><i>元</i></span>
                </div>
                <div v-if="item.lineType==2" class="road-box-conent tran-road-list">
                    <div>
                         <p><i class="road-city-name">铁路运输</i></p>
                          <div class="road-railway">
                                <span class="active-data">重货价:<i class="road-orange">{{item.weightPriceDisplay}}</i><i v-if="item.weightPriceUnitValue == null">元/公斤</i><i v-if="item.weightPriceUnitValue != null">{{item.weightPriceUnitValue}}</i>
                                </span>
                                <span class="active-data">轻货价:<i class="road-orange">{{item.volumePriceDisplay}}</i>元/立方米</span>
                                <span class="activ-data" style="margin-left: 22px;">有效期:<i class="road-black road-orange" v-if="item.longValid == 0">{{item.validDay || '暂未输入'}}</i><i v-if="item.longValid == 0">天</i><i class="road-black" v-if="item.longValid == 1">长期有效</i>
                                </span>
                          </div>
                    </div>
                </div>
                <div v-if="item.lineType==3" class="air-contant">
                    <div class="air-content-img">
                        <img :src="item.companyPic">
                  </div>  
                  <div class="air-content-date">
                      <span>{{dateTypeTime(item.fromTime,'MM:DD') }}</span>
                      <span>{{dateTypeTime(item.fromTime,'周')}}</span>
                  </div>
                  <div class="air-right-detail">
                      <div class="air-surplus">
                            <span>剩余仓位</span>
                            <a-progress :format="percent => `${percent}%`" strokeLinecap="square" :percent="chaNum(item.airSpaceSurplus,item.airSpaceTotal)" />
                            <span>可用</span>
                      </div>
                       <div class="air-company-road">
                        <!-- 线路中转 -->
                        <div class="air-road-change">
                            <!-- 出发机场-->
                            <div class="air-start-place">
                                <span>{{dateTypeTime(item.fromTime,'HH:MM') }}</span>
                                <span>{{item.fromAirPortName}}</span>
                            </div>
                            <div class="air-line">
                                <div class="air-transfer" v-if="item.airTransfer == 0">
                                  直达
                                </div>
                                <div class="air-transfer" v-if="item.airTransfer == 1">
                                  中转(杭州)
                                </div>
                                <div class="air-line-pic">
                                   <img src="./../../.././static/img/index/roadLine.png" alt="" />
                                </div>
                                <div class="air-arrive-time">
                                  抵运时间：{{dateTimeChang(item.fromTime,item.toTime)}}
                                </div>
                            </div>
                            <!-- 到达机场 -->
                            <div class="air-end-place">
                                <span>{{dateTypeTime(item.toTime,'HH:MM') }}</span>
                                <span>{{item.toAirPortName}}</span>
                            </div>
                        </div>
                        </div>
                  </div>
                  <div class="air-price">
                        <div>￥<i>{{item.transPriceDisplay}}</i>元</div>
                        <span>({{item.airModelValue}})</span>
                  </div>
                  <div class="road-box-conent">
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                    <nuxt-link :to="'/transport/'+item.lineId">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
                   <!--  <div>
                          <p><i class="road-city-name">航空运输</i></p>
                          <span class="seaC">航空公司:
                              <i class="road-black">{{item.transTypeName}}</i>
                          </span>
                          <table>
                              <thead>
                                    <th>Min</th>
                                    <th>+45</th>
                                    <th>+100</th>
                                    <th>+300</th>
                                    <th>+500</th>
                                    <th>+1000</th>
                              </thead>
                              <tbody>
                                <tr>
                                    <td class="road-orange">{{item.price_min}}</td>
                                    <td class="road-orange">{{item.price_45}}</td>
                                    <td class="road-orange">{{item.price_100}}</td>
                                    <td class="road-orange">{{item.price_300}}</td>
                                    <td class="road-orange">{{item.price_500}}</td>
                                    <td class="road-orange">{{item.price_1000}}</td>
                                </tr>
                               </tbody>
                          </table> 
                          <span class="seaTime">时效:<i class="road-black">{{item.validDay}}天</i></span>
                    </div> -->
                </div>
                <div v-if="item.lineType==4" class="road-box-conent sea-road"  style="width: 250px;">
                    <div>
                          <p><i class="road-city-name">海运</i></p>
                          <!-- <span class="seaC">海运公司:
                            <i class="road-black">{{item.seaCompany}}</i>
                          </span> -->
                          <table>
                                <thead>
                                    <th>20’</th>
                                    <th>40’</th>
                                    <th>40HQ</th>
                                    <th>45’</th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="road-orange">{{item.price_20}}</td>
                                        <td class="road-orange">{{item.price_40}}</td>
                                        <td class="road-orange">{{item.price_40HQ}}</td>
                                        <td class="road-orange">{{item.price_45}}</td>
                                    </tr>
                                </tbody>
                          </table>
                          <!-- <span class="seaTime">时效:<i class="road-black">{{item.validDay}}天</i></span> -->
                          <span class="seaTime" v-if="item.validDay">有效期:<i class="road-black  road-orange">{{item.validDay}}</i>天</span>
                          <span class="seaTime" v-if="!item.validDay"><i class="road-black">长期有效</i></span>
                    </div>
                </div>
                <div class="road-box-conent" v-if="item.lineType !=3">
                        <p><i class="road-city-name">{{item.companyName}}</i><b v-if="item.status == 1">推荐</b></p>
                        <div class="useStar">
                            <span>用户星级</span> 
                            <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                            <div class="attestaion">{{item.attestationStatusValue}}</div>
                        </div>
                </div>
                <div class="road-box-conent" v-if="item.lineType !=3">
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                    <nuxt-link :to="'/transport/'+item.lineId">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
              </a-list-item>
          </a-list>
        </div> 
      </div>
      <!-- 弹框 -->
      <Elastic :userId="userId" ref='elastic'></Elastic>
       <!-- 提示认证弹框 -->
      <Elastics  ref='elastics'></Elastics>
       <!--地图Svg显示位置-->
      <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
  </div>
</template>
<script>
import Elastic from './../../../components/dialog/Elastic'
import Elastics from './../../../components/dialog/Elastics'
import MapSvg from '@/components/dialog/MapSvg'
import { environment } from './../../../server/environment'
import AuthMixin from '~/mixins/auth'
export default{
    mixins: [ AuthMixin ],
    components: {
         Elastic,
         Elastics,
         MapSvg
    },
    data(){
        return{
          fromCity2:'',
          userId: '',
          lineType: '',
          // loggedIn:'',
          // 起运地地址
          departureCar: '',
          destinationCar: '',
          companyName: '',
          ALListData: [],
          detail: '',
          // pagination: {
          //   onChange: (page) => {
          //     console.log(page);
          //   },
          //   pageSize: 6,
          // },
          // 表格分页
          pagination: {
            onChange: (page) => {
              console.log(page);
              this.pagination.current = page;
              this.lineGetSelectLines();
            },
            pageSizeOptions: ['10', '20', '30', '50', '100'],
            current: 1,
            pageSize: 7,
            // showSizeChanger: true,
            total: 0,
            showTotal: (total, range) => `共 ${total} 条记录`
          },
        }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created(){
      this.departureCar = this.$route.query.fromCity || '';
      this.destinationCar = this.$route.query.toCity || '';
      this.companyName = this.$route.query.companyName || '';
      // alert(this.$route.query.companyName)
      if(this.$route.query.type){
        this.fromCity2 = this.$route.query.fromCity
      }else{
        this.fromCity = this.$route.query.fromCity || '';
        this.toCity = this.$route.query.toCity || '';
        this.companyName = this.$route.query.companyName || '';
      }
      this.lineGetSelectLines();
    },
    methods:{
      lineTypeChange (key) {
        this.lineType = key;
        this.pagination.current = 1;
        this.lineGetSelectLines();
      },
       // 时分 
      dateTypeTime(time,type) {
        if (time){
          time = time.replace(/-/g,'/');
          if(type == 'HH:MM'){
            let h = new Date(time).getHours()
            let f = new Date(time).getMinutes()
            return (h<9?'0':'')+h+':'+ (f<9?'0':'')+f
          }
          if(type == 'MM:DD'){
            let m = new Date(time).getMonth()+1
            let d = new Date(time).getDate()
            return (m<9?'0':'')+m+'-'+ (d<9?'0':'')+d
          }
          if(type == '周'){
            let day = new Date(time).getDay(),text = "";
            switch (day) {
              case 0: text = "星期日"; break;
              case 1: text = "星期一"; break;
              case 2: text = "星期二"; break;
              case 3: text = "星期三"; break;
              case 4: text = "星期四"; break;
              case 5: text = "星期五"; break;
              case 6: text = "星期六"; break;
            }
            return text
          }
        }
        return ''
      },
      // 百分比
      chaNum (min,max) {
        let num = (min/max)*100;
        if (num>100) num = 100
        return parseInt(num) || 0
      },
      // 两时间差 时分
      dateTimeChang (min,max){
        if (min && max){
          min = min.replace(/-/g,'/');
          max = max.replace(/-/g,'/');
          let time = new Date(max).getTime()-new Date(min).getTime()
          let h = parseInt(time/3600000)
          let f = parseInt((time%3600000)/1000/60)
          return (h<9&h>0?'0':'')+h+'小时'+(f<9&f>0?'0':'')+f+'分'
        }
        return ''
      },
      // 弹框
      elasticShowModal(){
        this.$refs.elastic.showModal();
      },
      TipsShowModal(id){
          this.$refs.elastics.warning(id);
      },
      // 重置
      reset () {
        this.pagination.current = 1;
        this.lineType = '';
        this.departureCar = '';
        this.destinationCar = '';
        this.companyName = '';
        this.beginPlace = '';
        this.endPlace = '';
        this.fromCity = '';
        this.toCity = '';
        this.lineGetSelectLines();
      },
      // 获取线路详情信息
      async lineById (id) {
          const res = await this.$store.dispatch('info/lineById',id)
          if (res.status && res.data.length) {
            this.detail = res.data[0];
            console.log('detail::',detail);
          } 
      },
      // 获取线路列表
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: this.lineType,
            fromCity: this.fromCity2,
            companyName: this.companyName,
            // toCity: this.destinationCar,
            // transType: this.transType,
            beginPlace: this.fromCity,
            endPlace: this.toCity,
            pageSize: this.pagination.pageSize,
            pageIndex: this.pagination.current,
          })
          if (res.status && res.data) {
            let d = res.data.rows;
            this.ALListData = d;
            for ( var i = 0;i<d.length;i++ ) {
              if (d[i].airSeaPrice) {
                if (d[i].lineType ==4){
                  d[i]['price_20'] = parseInt( d[i].airSeaPrice.split('20‘-')[1])||''
                  d[i]['price_40'] = parseInt( d[i].airSeaPrice.split('|40‘-')[1])||''
                  d[i]['price_40HQ'] = parseInt( d[i].airSeaPrice.split('|40HQ-')[1])||''
                  d[i]['price_45'] = parseInt( d[i].airSeaPrice.split('|45‘-')[1])||''
                  d[i].lineCycle = this.lineCycleReset(d[i].lineCycle)
                }
                if (d[i].lineType ==3){
                  d[i]['price_min'] = parseInt( d[i].airSeaPrice.split('MIN-')[1])||''
                  d[i]['price_45'] = parseInt( d[i].airSeaPrice.split('+45-')[1])||''
                  d[i]['price_100'] = parseInt( d[i].airSeaPrice.split('+100-')[1])||''
                  d[i]['price_300'] = parseInt( d[i].airSeaPrice.split('+300-')[1])||''
                  d[i]['price_500'] = parseInt( d[i].airSeaPrice.split('+500-')[1])||''
                  d[i]['price_1000'] = parseInt( d[i].airSeaPrice.split('+1000-')[1])||''
                }
              }
            }
            this.pagination.total = res.data.total;
            // console.log("allDetail::",ALListData);
          } 
      },
      // 离港班期显示处理
      lineCycleReset(str) {
        let s = str.replace(/,/g,'')
        let arr = [];
        for ( var i = 0;i<s.length;i++ ) {
          switch(s[i]){
            case '1':
              arr.push('一'); break;
            case '2':
              arr.push('二'); break;
            case '3':
              arr.push('三'); break;
            case '4':
              arr.push('四'); break;
            case '5':
              arr.push('五'); break;
            case '6':
              arr.push('六'); break;
            case '7':
              arr.push('日'); break;
          }
        }
        return String(arr).replace(/,/g,'/')
      },
      // 地图
      mapSvgCall (d) {
        // this[d.name] = d.city;
         this[d.name] = d.provCityArea;
        if(d.name=='departureCar'){
          this.fromCity = d.provCityArea;
          this.fromCity2 = ''
        }
        if(d.name=='destinationCar'){
          this.toCity = d.provCityArea;
        }   
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
       // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
  @import "./../../../assets/css/info/roadDetail.scss";
.road-detail-content{
  .low-price{
      text-indent: 0em !important;
      margin-left: 10px;
  }
  .company-names{
      margin-top: 5px;
  }
  .road-name{
    margin-top: 20px;
  }
  //公共样式
    .all-ways {
       .active-data {
          //text-indent: 0em !important;
          text-align: left;
          margin-left: 22px;
      }
     .road-box-conent:nth-child(2){
          margin-top:4px;
          text-align:left;
          margin-right: 26px;
          width: 204px;
         .road-orange{
               color:#FFA200;
         }
         .high-goods{
            margin-left: 35px;
          }
         p{
          line-height:16px;
          margin-bottom:12px;
          text-align: center;
         }
         span{
           margin-bottom:12px;
           text-indent:1em;
         }
        .seaTime{
            margin-top:16px;
            text-align: center;
        }
      }
    .road-box-conent:nth-child(3){
          //margin-left:68px;
         .road-city-name{
          vertical-align:middle;
        }
    }
  }
  //公路,铁路
  .tran-road-list{
      width:245px;
      //text-align:center;
      //margin-left:68px;
  }
  //航空
  .air-contant{
    .air-title{
        width:300px;
       // margin-left:25px;
        th{
          padding-right:20px;
        }
        td{
            padding-right:20px;
            padding-top:2px;
        }
    }
    .air-content-img{
        width: 190px;
        height: 140px;
        float: left;
        img{
            width: 100%;
            height: 100%;
        }
    }
    //日期
    .air-content-date{
        width: 150px;
        float: left;
        text-align: center;
        margin-top: 40px;
        span{
            display: block;
            font-size: 14px;
            color: #333333;
        }
    }
    .road-box-conent{
        width: 100px;
        button{
            display: block;
            //margin-left: 28px;
        }
        .road-detail{
            margin-top: 20px;
        }
    }
    .air-price{
      width: 168px;
      text-align: center;
      margin-top: 40px;
      font-size: 14px;
      float: left;
      margin-left: 46px;
      i{
          font-size: 24px;
          color: #FEB72D;
      }
      span{
         color: #000000;
      }
    }
     .air-right-detail{
        float: left;
        //width: 532px;
        //margin-left: 10px;
        //剩余仓位
        .air-surplus{
          margin-top: 15px;
          margin-left: 32px;
          .ant-progress{
             width: 340px;
          }
          .ant-progress-outer{
             width: 308px;
          }
          .ant-progress-text{
            padding-left: 46px;
          }
          span{
              font-size: 14px;
              color: #333333;
              vertical-align: middle;
          }
          span:nth-child(1){
              margin-right: 50px;
              margin-left: 10px;
          }
          span:nth-child(3){
              margin-left: 25px;
          }
          .ant-progress-inner{
              background-color: #FE4040;
          }
          .ant-progress-bg{
              background-color: #FFDFDF;
              border-radius: 0 10px 10px 0 !important;
              float: right;
          }
      }
      //航空公司
      .air-company-road{
          margin-top: 10px;
          width: 532px;
          float: left;
          //航空信息
          .air-comany-name{
              width: 56px;
              text-align: center;
              float: left;
              margin: 10px 6px 0 4px;
              span{
                display: block;
                font-size: 14px;
              }
              span:first-child{
                 color: #333333;
              }
              span:last-child{
                  color: #666666;
              }
          }
          //线路中转
          .air-road-change{
            float: left;
            width:  600px;
            text-align: center;
            .air-start-place{
              float: left;
              width: 128px;
             // margin-right: 20px;
              //margin-left: 14px;
              span{
                 display: block;
                 color: #15837A;
              }
              span:first-child{
                  font-size: 20px;
              }
               span:last-child{
                  font-size: 16px;
              }
            }
            .air-line{
              float: left;
              color: #666666;
              font-size: 14px;
              margin-left: 24px;
			  margin-top: 28px;
              .air-line-pic{
                 width: 278px;
                 height: 16px;
                 position: relative;
                 img{
                     width: 100%;
                     height: 100%;
                     position: absolute;
                     left: 0;
                     top: 50%;
                     margin-top: -8px;
                 }
              }
              .air-arrive-time{
                  margin-top: 10px;
              }
            }

          }
          //到达
          .air-end-place{
              float: left;
              margin-left: 20px;
			  width: 140px;
              span{
                 display: block;
                 color: #15837A;
              }
              span:first-child{
                  font-size: 20px;
              }
               span:last-child{
                  font-size: 16px;
              }
          }
          //机票价格
          .air-price{
            float: left;
            font-size: 14px;
            color: #000000;
            i{
               font-size: 24px;
               color: #FEB72D;
            }
          }
      }
  }
}
  //海路
  .sea-road{
      width:300px;
      margin-left:20px;
      th{
          width:50px;
          text-align:center;
          float: left;
          margin-left:10px;
      }
      th:first-child{
          margin-left:0;
      }
      tr{
          td{
              width:50px;
              text-align:center;
              float: left;
              margin-left:10px;
          }
          td:first-child{
              margin-left:0;
          }
      }
  }
}




</style>